<script setup>
	import { ref, reactive, watch } from "vue";
	import { onShow, onReachBottom } from "@dcloudio/uni-app";
	import { request } from "../../../common/http";
	import { ApiUrl } from "../../../common/ApiUrl";
	import { Toast, jumpPage } from "@/utils";
	import { goTo } from '../../../hooks/useNavigator';
</script>

<template>
	<view class="add_good">
		<view class="form_item">
			<view class="label">商品名称</view>
			<input placeholder="请输入商品名称" placeholder-class="input_placeholder">
		</view>
		<view class="form_item">
			<view class="label">商品分类</view>
			<view class="select_category">
				<view>选择</view>
				<image mode="aspectFill" src="/static/image/form/right_arrow.png" />
			</view>
		</view>
		<view class="form_item">
			<view class="label">成本价</view>
			<input placeholder="请输入商品成本价" placeholder-class="input_placeholder">
		</view>
		<view class="form_item">
			<view class="label">销售价</view>
			<input placeholder="请输入商品销售价" placeholder-class="input_placeholder">
		</view>
		<view class="form_item">
			<view class="label">促销价</view>
			<input placeholder="请输入商品促销价" placeholder-class="input_placeholder">
		</view>
		<view class="btn_save">
			<view @click="goTo('/pages/index/ProductManager/Add')">保存</view>
		</view>
	</view>

</template>

<style lang="scss">
.add_good {
	width: 750rpx;
	box-sizing: border-box;
	padding: 0 32rpx;
	background: #ffffff;
	.form_item {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 28rpx 0;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
		.label {
			font-weight: 500;
			font-size: 28rpx;
			color: #3B3D3D;
			width: 150rpx;
		}
		input {
			flex: 1;
			border: none;
			outline: none;
			border-radius: none;
			background: none;
			color: #3B3D3D;
			font-size: 28rpx;
		}
		.input_placeholder {
			color: #B6BDBD;
			font-size: 28rpx;
		}
		.select_category {
			display: flex;
			flex: 1;
			align-items: center;
			view {
				margin-left: auto;
				font-size: 28rpx;
				color: #B6BDBD;
			}
			image {
				flex-shrink: 0;
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
			}
		}
	}
	.btn_save {
		width: 750rpx;
		height: 140rpx;
		background: #ffffff;
		position: fixed;
		z-index: 9;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		view {
			width: 686rpx;
			height: 80rpx;
			background: linear-gradient( 90deg, #FF766C 0%, #FF4638 100%);
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>